<template>
  <div class="grade-warp    ">
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      style="margin-top: 12px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="过滤条件: ">
            <el-select
              v-model="form.grade"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="全部成绩" :value="0"></el-option>
              <el-option label="本学期课程" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="课程名: ">
            <el-select
              v-model="form.course_id"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in courseList"
                :key="item.course_id"
                :label="item.course_name"
                :value="item.course_id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button
            type="primary"
            style="margin-left: 14px;"
            @click="getElectiveList"
            >搜索</el-button
          >
          <el-button style="margin-left: 14px;" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      show-summary
      :summary-method="getSummaries"
    >
      <el-table-column prop="user_id" align="center" label="学号" width="180">
      </el-table-column>
      <el-table-column prop="user_name" align="center" label="学生姓名">
      </el-table-column>
      <el-table-column prop="course_id" align="center" label="课程号">
      </el-table-column>
      <el-table-column prop="course_name" align="center" label="课程名">
      </el-table-column>
      <el-table-column prop="grade" align="center" label="成绩">
        <template slot-scope="scope">
          {{ scope.row.grade ? scope.row.grade : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="110">
        <template slot-scope="scope">
          <el-button
            @click="update('edit', scope.row)"
            type="text"
            size="small"
            >{{ scope.row.grade ? '修改成绩' : '录入成绩' }}</el-button
          >
          <el-button
            type="text"
            style="color: #f56c6c"
            size="small"
            @click="deleteElective(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <updatePop ref="updatePop" @ok="getElectiveList" />
  </div>
</template>

<script>
import { electiveList, electiveDelete } from '@/api/elective'
import { courseList } from '@/api/course'
import updatePop from './components/updateElective-pop.vue'
export default {
  name: 'elective',
  components: {
    updatePop
  },
  data() {
    return {
      form: {
        grade: 0
      },
      tableData: [],
      courseList: []
    }
  },

  methods: {
    // 1. 获取选课列表
    getElectiveList() {
      electiveList({ ...this.form }).then(res => {
        if (res.result) {
          this.tableData = res.data
        }
      })
    },

    // 2. 重置
    reset() {
      this.form = { grade: 0 }
      this.getElectiveList()
    },

    // 3. 修改弹窗
    update(type, record) {
      this.$refs.updatePop.openMask({ type, ...record })
    },

    // 4. 删除选课
    deleteElective(record) {
      let params = {
        user_id: record.user_id,
        course_id: record.course_id
      }
      electiveDelete(params).then(res => {
        if (res.result) {
          this.$message.success(res.message)
          this.getElectiveList()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    // 5. 总计
    getSummaries(param) {
      const { columns, data } = param
      let count = 0
      const values = data.reduce((prev, curr) => {
        const value = Number(curr.grade)
        curr.grade && count++
        if (!isNaN(value)) {
          return prev + Number(curr.grade)
        } else {
          return prev
        }
      }, 0)
      return [
        '总计',
        '',
        '',
        '共' + data.length + '门',
        'AVG: ' + (values / count).toFixed(2)
      ]
    },

    // 6. 获取课程列表
    getCourseList() {
      courseList({ ...this.form }).then(res => {
        if (res.result) {
          this.courseList = res.data
        }
      })
    }
  },

  mounted() {
    this.getElectiveList()
    this.getCourseList()
  }
}
</script>

<style lang="scss" scoped></style>
